var cols = [
  { left: 0, top: 0 },
  { left: 254, top: 0 },
  { left: 254 * 2, top: 0 },
  { left: 254 * 3, top: 0 }
]
let videoHeight
function Waterfall() {
  for (var i = 1; i <= 56; i++) {
    let liObj = document.createElement('li')
    liObj.style.position = 'absolute'
    liObj.style.display = 'none'
    liObj.innerHTML = `
    <li>
    <div>
        <img src="./src/imgs2/${i}.jpg" alt="">
    </div>
    <span>${i}初秋絮语，用音乐记下你的点点滴滴</span>
    <p>
        <i class="iconfont icon-aixin"></i>${i}${i}.6w喜欢
    </p>
  </li>
    `
    document.querySelector('section.video ul').appendChild(liObj)


    liObj.querySelector('img').onload = function () {
      var minHeightIndex = 0
      cols.forEach(function (item, i) {
        if (cols[minHeightIndex].top > item.top) {
          minHeightIndex = i
        }
      })
      liObj.style.display = 'block'
      liObj.style.left = cols[minHeightIndex].left + 'px'
      liObj.style.top = cols[minHeightIndex].top + 'px'
      cols[minHeightIndex].top += liObj.offsetHeight
      videoHeight = cols[minHeightIndex].top
    }
  }
}
window.onscroll = function () {
  let clientHeight = window.innerHeight || document.documentElement.clientHeight
  let clientTop = document.body.scrollTop || document.documentElement.scrollTop
  if (clientHeight + clientTop > videoHeight) {
    Waterfall()
  }
}
window.addEventListener('load', Waterfall)

